import { inject } from 'vue'
import type { PropType } from 'vue'
import type { ComputedRef } from 'vue'
import type Color from './util/color'

export interface Options {
    enableAlpha: boolean
    format: string
    value?: string
}
export interface IUseOptions {
    currentColor: ComputedRef<String>
}
export type Nullable<T> = T | null
export type SizeType = 'medium' | 'small' | 'mini' | 'default'
export type ColorFormatType = 'hsl' | 'hsv' | 'hex' | 'rgb' | ''


export const OPTIONS_KEY = Symbol()
export const useOptions = () => {
    return inject<IUseOptions>(OPTIONS_KEY)
}

export const AlphaSliderProps = {
    color: {
        type: Object as PropType<Color>,
        default: () => { }
    },
    vertical: {
        type: Boolean,
        default: false
    }
}

export const HueSliderProps = {
    color: {
        type: Object as PropType<Color>,
        default: () => { }
    },
    vertical: {
        type: Boolean,
        default: false
    }
}

export const PreDefineProps = {
    color: {
        type: Object as PropType<Color>,
        default: () => { }
    },
    colors: {
        type: Array as PropType<string[]>,
        required: true,
        default: () => []
    }
}

export const SvPanelProps = {
    color: {
        type: Object as PropType<Color>,
        default: () => {}
    }
}

export const ColorPickerProps = {
    name: {
        type: String,
        default: '',
    },
    value: {
        type: String,
        default: '#FFF'
    },
    showAlpha: {
        type: Boolean,
        default: false
    },
    colorFormat: {
        type: String as PropType<ColorFormatType>,
        default: ''
    },
    popperClass: {
        type: String
    },
    visible: {
        type: Boolean,
        default: false
    },
    predefine: {
        type: Array as PropType<string[]>,
        default: () => []
    },
    disabled: {
        type: Boolean,
        default: false
    },
    size: {
        type: String as PropType<SizeType>,
        default: 'default'
    },
    colors: {
        type: Array as PropType<string[]>,
        required: true,
        default: () => []
    },
    vertical: {
        type: Boolean,
        default: false
    },
    hueRef: {
        type: Object,
        default: () => { }
    }
}